/**
 * Created by ray on 17-6-9.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React,{ Component } from 'react';
import {
StyleSheet,
View,
Text,
Image,
} from 'react-native'

import {request,apiStore,configure} from '../../service/api';
import Swiper from 'react-native-swiper';



export default class Banner extends Component {

    constructor(props){
        super(props);

        this.state={
            images:null
        }
    }

    componentWillMount() {console.log('componentWillMount')}


    componentDidMount() {
        request(
            apiStore.systemConf.banner,
            configure.POST,
            configure.Body('paramKey=banner')
        ).then((result) => {
            let data = result.res.data.paramValue.split(',');

            this.setState({
                images:data,
            });

        

        },(result) => {
            alert(`error:${result}`);
        });

        console.log('componentDidMount')

    }

    componentWillUpdate() {
        console.log('componentWillUpdate')
    }

    componentDidUpdate() {
        console.log('componentDidUpdate')
    }

    componentWillUnmount() {
        console.log('componentWillUnmount')
    }



    render() {
        let pics = this.state.images;

                 if (pics && pics.length >0) {
                     return (
                         <Swiper
                             height={180}
                             loop={true}
                             showsButtons={false}
                             showBanner={true}
                             autoplay={true}
                             horizontal={true}
                         >
                             {this.renderImages()}
                         </Swiper>
                     );
                 }
                 else {
                     return <Image/>
                 }
    }


    renderImages() {
        let ivs = [];

        for (let i = 0; i < this.state.images.length;i++) {
            ivs.push(
                <Image
                    key={i}
                    style={{height:200}}
                    source={{uri:`${apiStore.picUrl}${this.state.images[i]}`}}
                />
            );
        }
        return ivs;
    }
}




const styles = StyleSheet.create({
   container:{
       flexDirection:'row',
       alignItems:'center',
       backgroundColor:'pink',
       height:150
   },
   flex:{
       flex:1,
       backgroundColor:'red'

   },
    border:{
        borderWidth:0.5,
        borderColor:'gray'
    }
});

